<template>
  <div>
    <van-tabbar inactive-color="rgb(51, 51, 51)" active-color="rgb(255, 204, 0)" :route="true">
      <van-tabbar-item to="/home">
        <span>猜你喜欢</span>
        <template #icon="props">
          <van-icon class="iconfont" class-prefix="icon" name="cainixihuan" />
        </template>
      </van-tabbar-item>
      <!-- 分类 -->
      <van-tabbar-item to="/cates">
        <span>分类</span>
        <template #icon="props">
          <van-icon class="iconfont" class-prefix="icon" name="fangdajing" />
        </template>
      </van-tabbar-item>
      <!-- 排行榜 -->
      <van-tabbar-item to="/cart" :badge="items.length?items.length:''">
        <span>购物车</span>
        <template #icon="props">
          <van-icon name="shopping-cart-o" />
        </template>
      </van-tabbar-item>
      <!-- 我的易购 -->
      <van-tabbar-item to="/mine">
        <span>我的易购</span>
        <template #icon="props">
          <van-icon class="iconfont" class-prefix="icon" name="huabanfuben1" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState({
      items: (state) => state.cart.carts.items
    })
  },
}
</script>

<style lang="scss" scoped>
</style>